<template>
    <div class="container">
        <div>RMC机柜温度模拟器</div>
        <div class="container-group">
            <div class="mapcontainer">
                <img id="frame" src="./images/frame.png" alt="frame" />
                <!--node loop-->
                <div v-for="(node, index) in nodes" :key="index">
                    <img class="equipment" :src="`/images/${node.type}.png`" :alt="index"
                        :height="node.occupy * heightPerU"
                        :style="{ top: ((rackHeightU - node.location) * heightPerU + startY) + 'px', left: startX + 'px' }"
                        @load="handleEquipmentLoaded" />
                    <heat-map v-if="node.enable" class="heatmap" :svgwidth="node.svgw" :svgheight="node.svgh"
                        :opacity="opacity"
                        :style="{ top: ((rackHeightU - node.location) * heightPerU + startY - 3) + 'px', left: startX + 'px' }"
                        :points="node.points" :gradient="gradient" :grain="grain" 
                        :min-temp="minTemperature"
                        :max-temp="maxTemperature"
                        :color-table="colorTable">
                    </heat-map>
                </div>
                <!--Rack Pole-->
                <img class="equipment" src="./images/holder-1.png"
                    :style="{ top: ((rackHeightU - poleU) * heightPerU + startY) + 'px', left: (startX + 3) + 'px' }" />
                <img class="equipment" src="./images/holder-1.png"
                    :style="{ top: ((rackHeightU - poleU) * heightPerU + startY) + 'px', left: (rackWidth - startX - poleWidth - 3) + 'px' }" />
                <!--Rack Stiffeners-->
                <img class="equipment" src="./images/holder-2.png"
                    :style="{ top: ((rackHeightU - upRackU) * heightPerU + startY) + 'px', left: startX + 'px' }" />
                <img class="equipment" src="./images/holder-3.png"
                    :style="{ top: ((rackHeightU - downRackU) * heightPerU + startY) + 'px', left: startX + 'px' }" />
            </div>
            <div class="control-conainer">
                <div class="u-contol" v-for="(node, index) in nodes" :key="index">
                    <div>U{{node.location}}</div>
                    <el-input-number class="temp-val" v-model="node.avgTemp" :min="minTemperature"
                        :max="maxTemperature" :step="stepSize" :controls="true"
                        @change="onTemperatureChange(index)"
                        :controls-position="controlPosition" size="small">
                    </el-input-number>
                    <el-switch class="powser-switch" v-model="node.enable" active-text="ON" inactive-text="OFF" :active-value="true"
                        :inactive-value="false">
                        <template #active>
                            <span class="switch-text">Power ON</span>
                        </template>
                        <template #inactive>
                            <span class="switch-text">Power OFF</span>
                        </template></el-switch>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { HeatMap } from '../components/lib'
import { getUINodes } from './scripts/nodes'
export default {
    name: "App",
    components: {
        HeatMap
    },

    data() {
        return {
            // shelf config
            startX: 22,
            startY: 20,
            rackHeightU: 48,
            heightPerU: 14,
            upRackU: 38,
            downRackU: 10,
            poleU: 43,
            poleWidth: 7,
            rackWidth: 194,

            // item format: { type:<String>, location:<Number>, occupy:<Number>, points:<Array> }
            nodes: [],

            // temp range
            minTemp: 0,
            maxTemp: 100,
            opacity: 0.7,
            gradient: 0.01,
            grain: 2,

            // color table
            colorTable: ["#0033FF", "#00FF00", "#FFFF00", "#FF0000", "#400000"],

            // el-number-input settings
            minTemperature: -20, // 最小温度
            maxTemperature: 120, // 最大温度
            stepSize: 1, // 步进大小
            controlPosition: 'both' // 显示上调和下调按钮
        };
    },

    async mounted() {
        console.log("simulator loaded successfully!");
        this.nodes = await getUINodes();
    },

    methods: {
        handleEquipmentLoaded(event) {
            const imgElement = event.target;
            console.log(`loaded image: ${imgElement.alt}`);
            /*const index = imgElement.alt;
            if (index >= 0 && index < this.nodes.length) {
                this.nodes[index].svgw = imgElement.width;
                this.nodes[index].svgh = imgElement.height;
            }*/
        },
        onTemperatureChange(index) {
            console.log(`temp index: ${index} changed: ${this.nodes[index].avgTemp}`);
            if (this.nodes[index].points.length > 0) {
                const centerPt = this.nodes[index].points[0];
                this.nodes[index].points = [
                    {
                        x: centerPt.x,
                        y: centerPt.y,
                        temp: this.nodes[index].avgTemp
                    }
                ];
            }
        }
    }
}
</script>

<style scoped>
body {
    background-color: rgb(244,244,246);
}

.container {
    padding: 2%;
    font-family: 'TT Norm Pro';
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.container-group {
    display: flex;
    flex-direction: row;
    margin-top: 30px;
}

.mapcontainer {
    position: relative;
}

.equipment {
    position: absolute;
}

.control-conainer {
    margin-left: 30px;
    display: flex;
    flex-direction: column;
}

.u-contol {
    display: flex;
    flex-direction: row;
    margin-bottom: 5px;
}

.heatmap {
    position: absolute;
    z-index: 1;
}

.control {
    margin-top: 20px;
}

.controlbtn {
    margin: 10px;
}

.temp-val {
    height: 30px;
    margin-left: 10px;
}

.powser-switch {
    margin-left: 10px;
}

.switch-text {
  color: #409eff;
  font-weight: bold;
}
</style>